<template>
  <div class="total-box">
    <div class="buju">
      <div class="total" v-if="this.$route.name === '洗衣房'">
        <!-- 添加 -->
        <div class="one-add" @click="openDialog()">
          <i class="el-icon-circle-plus-outline addicon"></i>
        </div>
        <div
          class="one"
          @click="goMachine(item.washhouse_id)"
          v-for="(item, index) in houseList"
          :key="index"
          @mouseover="mouseHover(index)"
          @mouseout="mouseOut(index)"
        >
          <div ref="delicon" class="yincang">
            <!-- <div class="namezs">名字：{{ item.washhouse_name }}</div> -->
            <div class="el-icon-thumb">&nbsp;&nbsp;进入洗衣机</div>
            <br />
            <div class="name">名字：{{ item.washhouse_name }}</div>
            <div class="dizhi">地址：{{ item.washhouse_address }}</div>
            <div class="time">创建时间：{{ item.washhouse_creation_time }}</div>
            <div class="numuber">洗衣机数量：{{ item.washing_machine }}</div>
            <!-- @click.stop="delHouse(item)" -->
            <div class="delete" ref="delete">
              <i class="el-icon-circle-close delete-icon"></i>
            </div>
            <!-- <el-row>
              <el-button @click="delHouse(item)" class="btnn">维修停用</el-button>
            </el-row> -->
          </div>

          <div class="namezs">{{ item.washhouse_name }}</div>
          <!-- <div class="zhezhao" v-if="item.wash_machine_state == 3">已停用</div> -->
        </div>
        <!-- <div   v-for="(item, index) in houseList"
          :key="index">
          <div class="namezs">名字：{{ item.washhouse_name }}</div>
        </div> -->
      </div>
      <!-- 添加 -->
      <!-- <div class="one-add" @click="openDialog()">
      <i class="el-icon-circle-plus-outline addicon"></i>
    </div> -->
    </div>

    <!-- 点击出现添加的模态框 -->
    <el-dialog
      title="添加洗衣房"
      :visible.sync="dialogFormVisible"
      @opened="handopened"
      width="800px"
    >
      <el-form :model="form">
        <el-form-item
          label="洗衣房名称"
          :label-width="formLabelWidth"
          class="from-item"
        >
          <el-input
            :value="form.washhouse_name"
            autocomplete="off"
            type="text"
            v-model="form.washhouse_name"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="洗衣房地址"
          :label-width="formLabelWidth"
          class="from-item"
        >
          <div class="input-item-prepend">
            <!-- v-model="form.wash_machine_title" -->
            <!-- autocomplete="off" -->
            <el-input
              ref="address"
              type="text"
              :value="form.washhouse_address"
            ></el-input>
          </div>
        </el-form-item>

        <el-form-item
          label="洗衣房坐标"
          :label-width="formLabelWidth"
          class="from-item"
        >
          <div ref="motaikuangref" class="gd-map"></div>

          <div class="input-item">
            <div class="input-item-prepend">
              <!-- 点击获取地址按钮 -->
              <!-- <input
                ref="regeo"
                type="button"
                class="btn"
                value="获取地址"
                
              /> -->
              <!-- <span class="input-item-text">经纬度</span> -->
            </div>
            <!-- 经纬度 -->
            <input ref="lnglat" type="text" value="112.485726,34.658312" />
            <!-- washhouse_addressX 
            washhouse_addressY  -->
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="queding">确定</el-button>
      </div>
    </el-dialog>
    <router-view></router-view>
  </div>
</template>
<script>
import http from '../api';
export default {
  data() {
    return {
      add: '',
      houseList: [],
      dialogFormVisible: false,
      form: {
        washhouse_name: '',
        washhouse_address: '',
        washhouse_addressX: '',
        washhouse_addressY: '',
        // wash_machine_title: '',
        // wash_machine_remarks: 'wwwwww',
        // washhouse_id: '',
        // founder_id: 0,
        // wash_machine_picture: '',
      },
      formLabelWidth: '120px',
      lnglats: [],
    };
  },
  mounted() {
    http.houseData().then((r) => {
      console.log(r);
      this.houseList = r.data.data;
    });
  },
  methods: {
    delHouse(item) {
      console.log(item);
      http
        .delHouse({
          washhouse_state: 2,
          washhouse_id: item.washhouse_id,
        })
        .then((r) => {
          console.log(r);
        });
    },
    handopened() {
      this.$refs.motaikuangref;
      console.log(this.$refs.motaikuangref);
      var map = new AMap.Map(this.$refs.motaikuangref, {
        zoom: 11, //级别
        center: [112.485726, 34.658312], //中心点坐标
        viewMode: '3D', //使用3D视图
      });

      var geocoder = new AMap.Geocoder({
        city: '0379', //城市设置，默认：“全国”
        radius: 1000, //范围，默认：500
      });
      var marker = new AMap.Marker();
      console.log('7777777777777', this.$refs.lnglat.value.split(' '));
      let that = this;
      function regeoCode() {
        that.lnglat = that.$refs.lnglat.value.split(',');
        console.log('222', that.lnglat);
        map.add(marker);
        marker.setPosition(that.lnglat);
        geocoder.getAddress(that.lnglat, function (status, result) {
          if (status === 'complete' && result.regeocode) {
            var address = result.regeocode.formattedAddress;
            // that.$refs.address.value = address;
            that.form.washhouse_address = address;
            //  测试
            console.log('234564', result.regeocode.formattedAddress);
            console.log('address', address);
          } else {
            log.error('根据经纬度查询地址失败');
          }
        });
      }
      map.on('click', function (e) {
        that.$refs.lnglat.value = e.lnglat;
        regeoCode();
      });
      // that.$refs.regeo.onclick = regeoCode;
      that.$refs.lnglat.onkeydown = function (e) {
        if (e.keyCode === 13) {
          regeoCode();
          return false;
        }
        return true;
      };
    },
    // regeo() {},
    // ditu() {},
    queding() {
      this.dialogFormVisible = false;
      console.log(this.$route.params.houseid);
      this.form.washhouse_id = this.$route.params.houseid;
      this.form.founder_id = sessionStorage.getItem('user-id');
      // http.userWashMachine(this.form).then((r) => {
      //   console.log(r)
      //   this.machineList=r.data.data;
      // });
      http
        .userWashHouse({
          washhouse_address: this.$refs.address.value,
          washhouse_name: this.form.washhouse_name,
          washhouse_addressX: this.$refs.lnglat.value,
          washhouse_addressY: this.$refs.lnglat.value,
        })
        .then((r) => {
          console.log('777', r);
          this.houseList = r.data.data;
        });
    },
    openDialog(item) {
      this.dialogFormVisible = true;
      // this.dialogVisible = false;
    },
    //鼠标离开 隐藏
    mouseOut(index) {
      this.$refs.delicon[index].style.display = 'none ';
    },
    //鼠标悬浮 显示
    mouseHover(index) {
      this.$refs.delicon[index].style.display = 'block';
      this.$refs.delicon[index].style.backgroundColor =
        ' rgba(183, 185, 185,0.9)';
      // this.$refs.delete.style.display = 'block ';
      //    this.$refs.delete.style.display = 'none ';
    },
    goMachine(index) {
      this.$router.push({
        name: '洗衣机',
        params: {
          houseid: index,
        },
      });
    },
  },
};
</script>
<style scoped>
.delete {
  position: absolute !important;
  top: -10px !important;
  width: 98%;
  height: 8%;
  text-align: right;
  /* background-color: chartreuse; */

  /* position: relative !important;
  left: 2220px;
  top: 200px; */
}
.delete-icon {
  font-size: 30px;
}
.zhezhao {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: rgb(194, 192, 192);
  position: absolute;
  top: 25%;
  left: 23%;
  font-size: 25px;
  color: rgb(255, 38, 0);
  line-height: 120px;
  text-align: center;
}
.buju {
  width: 100%;
  /* height: 1400px; */
  /* background-color: rgb(155, 46, 46); */
  /* margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; */
}
.total {
  width: 90%;
  height: 370px;
  position: relative;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.total :hover {
  /* 当鼠标划过的时候缩放(动画效果): 
  scale(x,y)， x和y都是1倍展示，如果是scale(2,2) 就是原始大小的2倍展示*/
  transform: scale(1.1);
  transition: linear;
  /* 外阴影:box-shadow: x轴  y轴 px 颜色 */
  box-shadow: 0px 0px 30px rgb(161, 161, 161);
}
.one {
  border-radius: 5%;
  width: 27%;
  height: 385px;
  /* 背景色透明度 */
  /* background-color: rgba(28, 102, 136, 0.5); */
  margin-top: 50px;
  border: 1px solid rgb(218, 216, 205);
  transition: 1s;
  /* background-image: url(../../static/image/001.png); */
  /* css添加背景图*/
  background-image: url(../../static/image/004.jpg);
  position: relative;
}
.one div {
  color: rgb(95, 97, 96);
  /* css阻止事件冒泡 */
  pointer-events: none;
  line-height: 40px;
  position: relative;
  left: 18px;
  top: 60px;
  /* color: #707b84;
  background: #3e464d; */
}
.one >>> .namezs {
  height: 40px;
  position: absolute;
  left: 30%;
  top: 5px;
  /* background-color: chocolate; */
  width: 65%;
  text-align: right;
  font-size: 20px;
  font-weight: bolder;
  color: cadetblue;
}

.item {
  margin: 4px;
}
.el-icon-thumb {
  /* display:none; */
  color: rgb(57, 89, 102) !important;
  font-weight: bolder;
  /* width: 120px; */
  /* text-align: center; */
  /* border:1px solid tomato; */
  font-size: 23px;
}
.yincang {
  display: none;
  width: 100%;
  height: 390px;
  border-radius: 5%;
  position: relative !important;
  left: 0px !important;
  top: -2px !important;
}
.one-add {
  width: 27%;
  height: 360px;
  margin-top: 30px;
  /* border: 1px solid gold; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-right: -10px 0px 0px 0px; */
}
.addicon {
  font-size: 100px;
  color: gray;
}
.gd-map {
  width: 100%;
  height: 300px;
  /* background-color: blueviolet; */
}
/* .total-box {
  background-color: white;
  padding-top: 30px;
  margin-top: 10px;
} */
.btnn{
  width: 80px;
  height: 50px;
  background-color: cornflowerblue;
  position: relative;
  left: 90px;
  top: 0px;
}
</style>
